<template>
  <CommonTable
    ref="commonTable"
    :is-select="true"
    :columns="columns"
    :dataSource="dataSource"
    :total="dataSource.length"
    :isLoading="isLoading"
    @getPageParams="getPageParams"
    @get-table-sort="getTableSort"
    @getSelectColumn="getSelectColumn"
  >
    <template v-slot:bodyCell="{ scope }">
      <span v-if="scope.column.key !== 'action'">{{ scope.value }}</span>
      <span v-else-if="scope.column.key === 'action'">
        <i class="details" type="primary" @click="onView(scope.record)">回复</i>
      </span>
      <span v-else-if="scope.column.key === 'tags'">
        <MailOutlined />
        {{ scope.record.tags.join(', ') }}
      </span>
    </template>
  </CommonTable>
  <a-modal
    v-model:open="applyForRemovalModal"
    class="applyForRemovalModal"
    style="
      /* background: #FFFFFF; */
      padding: 0 25px;
      height: 535px;
      width: 800px;
      box-shadow: 1px 3 8px 2px rgba(0, 0, 0, 0.08);
      border-radius: 2px 2px 2px 2px;
    "
    title="问题反馈"
    @ok="handleOk"
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item label="选择反馈类型" name="way">
        <a-radio-group v-model:value="formState.way">
          <a-radio value="1">页面异常，打不开</a-radio>
          <a-radio value="2">账号相关问题</a-radio>
          <a-radio value="3">操作问题</a-radio>
          <a-radio value="4">功能建议</a-radio>
          <a-radio value="5">其他反馈</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="原因描述" name="cause">
        <a-textarea
          v-model:value="formState.cause"
          :rows="4"
          placeholder="请详细描述你遇到的问题"
        />
      </a-form-item>
      <a-form-item label="问题截图(格式必须为JPG或PNG)">
        <a-upload
          v-model:fileList="formState.screenshot"
          list-type="picture-card"
          :max-count="1"
        >
          <div v-if="formState.screenshot.length < 1">
            <PlusOutlined
              :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }"
            />
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-form-item style="text-align: center">
        <a-button
          htmlType="submit"
          style="
            margin-right: 16px;
            background-color: rgba(76, 200, 126, 1);
            border-radius: 2px 2px 2px 2px;
          "
          type="primary"
          @click="handleOk"
          >提 交</a-button
        >
        <a-button
          class="button_cancel_hover"
          style="margin-left: 8px; border-radius: 2px 2px 2px 2px"
          @click="handleCancel"
          >取 消</a-button
        >
      </a-form-item>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, reactive, computed, toRaw } from 'vue'
import CommonTable from '../../components/myTable/indexView.vue'
// import { cloneDeep } from 'lodash'
import { MailOutlined, PlusOutlined } from '@ant-design/icons-vue'
// import { createVNode } from 'vue'
// import { Modal, Empty } from 'ant-design-vue'
const columns = [
  {
    title: '用户ID',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    resizable: true,
    // maxWidth: 200,
    // minWidth: 75,
    width: 100,
    sorter: false,
  },
  {
    title: '1游戏名称',
    width: 100,
    dataIndex: 'age',
    align: 'center',
    key: 'age',
  },
  {
    title: '1反馈时间',
    dataIndex: 'address',
    align: 'center',
    key: 'tags',
    width: 100,
  },
  {
    title: '1反馈类型',
    align: 'center',
    dataIndex: 'address',
    key: '2',
    width: 100,
  },
  {
    title: '1问题描述',
    dataIndex: 'address',
    align: 'center',
    key: '3',
    width: 100,
  },
  {
    title: '1反馈信息',
    align: 'center',
    dataIndex: 'address',
    key: '4',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'action',
    align: 'center',
    resizable: true,
    // maxWidth: 200,
    minWidth: 75,
    width: 100,
    sorter: false,
  },
]

const dataSource = ref(
  Array.from({ length: 100 }, (_, i) => ({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ['cool', 'teacher'],
  })),
)

const isLoading = ref(false)
const commonTable = ref(null)

const getPageParams = (start, length) => {
  console.log('分页数据：', start, length)
}

const getSelectColumn = rows => {
  console.log('选择的数据：', rows)
}

const getTableSort = sorter => {
  if (sorter.order) {
    console.log(
      sorter.order === 'ascend' ? '升序' : '降序',
      '排序表头字段：',
      sorter.field,
    )
  } else {
    console.log('默认顺序----')
  }
  console.log('排序数据：', sorter)
}

const onView = item => {
  console.log('View item:', item)
  applyForRemovalModal.value = true
}

// const onDelete = key => {
//   dataSource.value = dataSource.value.filter(item => item.key !== key)
// }

// const handleAdd = () => {
//   const newData = {
//     key: `${dataSource.value.length}`,
//     name: `Edward King ${dataSource.value.length}`,
//     age: 32,
//     address: `London, Park Lane no. ${dataSource.value.length}`,
//   }
//   dataSource.value.push(newData)
// }

// 弹框
const formRef = ref()
const formState = reactive({
  way: '',
  cause: '',
  screenshot: [],
})
const rules = {
  way: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  cause: [
    {
      required: true,
      message: 'Please input activity form',
      trigger: 'blur',
    },
  ],
}
const applyForRemovalModal = ref(false)
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
      applyForRemovalModal.value = false
      // formRef.value.resetFields();
      // formState.screenshot =[]
    })
    .catch(error => {
      console.log('error', error)
    })
  console.log(111, 'addM')
}
const handleCancel = () => {
  applyForRemovalModal.value = false
  formRef.value.resetFields()
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
